<template>
	<view class="content">
		<view>
			<view class="ipts">

				<!-- 施工地址 -->
				<view class="info-item autoheight">
					<view class="info-item-left" style="width: 230rpx;">
						<view class="dot"></view>
						<span>施工地址</span>
					</view>
					<view class="" style="display: flex;align-items: center;">
						<!-- <input class="place-class" type="text" disabled v-model="info.address"
							placeholder="请填写乡镇区、村、施工地址" /> -->
							<view>{{info.address}}</view>
						<image src="/static/qxsb.png" mode="" style="width: 40rpx; height: 40rpx;" @tap="tapMap(info)">
						</image>
					</view>
				</view>

				<!-- 建设单位 -->
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>建设单位</span>
					</view>
					<view class="place-class">
						{{info.build_unit}}
					</view>

				</view>

				<!-- 建设单位联系人 -->
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>建设单位联系人</span>
					</view>
					<input class="item-ipt" type="text" disabled v-model="info.build_unit_username" placeholder="请输入" />
				</view>

				<!-- 联系电话 -->
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>建设联系电话</span>
					</view>
					<input type="number" disabled v-model="info.build_unit_mobile" placeholder="请输入" />
				</view>

				<!-- 施工单位 -->
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>施工单位</span>
					</view>
					<input type="text" disabled v-model="info.construction_unit" placeholder="请输入" />
				</view>

				<!-- 施工单位联系人 -->
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>施工单位联系人</span>
					</view>
					<input type="text" disabled v-model="info.construction_unit_username" placeholder="请输入"
						placeholder-style="place-class" />
				</view>

				<!-- 联系电话 -->
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>施工联系电话</span>
					</view>
					<input type="number" disabled v-model="info.construction_unit_mobile" placeholder="请输入"
						placeholder-style="place-class" />
				</view>

				<!-- 施工类型 -->
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>施工类型</span>
					</view>
					<view class="place-class">{{info.construction_type_text}}</view>
				</view>

				<!-- 施工工艺 -->
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>施工工艺</span>
					</view>
					<view class="place-class">{{info.construction_workmanship_text}}</view>
				</view>

				<!-- 采用工机具 -->
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>采用工机具</span>
					</view>
					<view class="place-class">{{info.tools_text}}</view>
				</view>

				<!-- 天然气管概述 -->
				<view class="info-item autoheight">
					<view class="info-item-left" style="width: 320rpx;">
						<view class="dot"></view>
						<span>天然气管概述</span>
					</view>
				<!-- 	<input type="text" v-model="info.trachea_info" disabled placeholder="请输入"
						placeholder-style="place-class" />
						 -->
						
						<view>{{info.trachea_info}}</view>
						
				</view>

				<!-- 信息来源 -->
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>信息来源</span>
					</view>
					<view class="place-class">{{info.source_info_text}}</view>
				</view>

				<!-- 第一时间到达施工现场情况简述 -->
				<view class="supplement">
					<view class="info-item" style="border-bottom: 0;">
						<view class="info-item-left">
							<view class="dot"></view>
							<span>第一时间到达施工现场情况简述</span>
						</view>
					</view>
					<view class="explain">
						<textarea v-model="info.scene_info" maxlength="500" disabled auto-height class="textArea"
							placeholder="请简述..." style="font-size: 28rpx;" />
					</view>
				</view>
				<!-- 潜在影响居民户数 -->
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>潜在影响居民户数</span>
					</view>
					<input type="text" v-model="info.resident_num" disabled placeholder="请输入" />
				</view>

				<!-- 潜在影响工商业户数 -->
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>潜在影响工商业户数</span>
					</view>
					<input type="text" v-model="info.business_num" placeholder="请输入" />
				</view>

				<!-- 应急阀门 -->
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>应急阀门</span>
					</view>
					<view class="place-class"></view>
				</view>
				<view class="" style="padding: 0 20rpx;">
					<template v-for="i,index in info.emergency_valve_list">
						<view class="info-item" :key="index">
							<view class="info-item-left">
								<span>{{i.number}}</span>
							</view>
							<input v-model="i.address" disabled placeholder="请选择" />
						</view>
					</template>
				</view>
			</view>
			<!-- 第二块 -->
			<view class="ipts">
				<!-- 工地照片 -->
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>工地照片</span>
					</view>
					<view class="addform-items">
						<template v-for="(i,index) in info.construction_images">
							<view class="" style="position: relative;"
								@tap="$previewImage(info.construction_images,index)">
								<image class="form-img" :src="i" :key="index"></image>
							</view>
						</template>
					</view>
				</view>


				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>建设方告知书签发照片</span>
					</view>
					<view class="addform-items">
						<template v-for="(i,index) in info.build_sign_images">
							<view class="" style="position: relative;"
								@tap="$previewImage(info.build_sign_images,index)">
								<image class="form-img" :src="i" :key="index"></image>
							</view>
						</template>
					</view>
				</view>


				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>施工方告知书签发照片</span>
					</view>
					<view class="addform-items">
						<template v-for="(i,index) in info.construction_sign_images">
							<view class="" style="position: relative;"
								@tap="$previewImage(info.construction_sign_images,index)">
								<image class="form-img" :src="i" :key="index"></image>
							</view>
						</template>
					</view>
				</view>

				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>保护方案签订照片</span>
					</view>
					<view class="addform-items">
						<template v-for="(i,index) in info.protected_sign_images">
							<view class="" style="position: relative;"
								@tap="$previewImage(info.protected_sign_images,index)">
								<image class="form-img" :src="i" :key="index"></image>
							</view>
						</template>
					</view>
				</view>
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>其他照片</span>
					</view>
					<view class="addform-items">
						<template v-for="(i,index) in info.other_images">
							<view class="" style="position: relative;" @tap="$previewImage(info.other_images,index)">
								<image class="form-img" :src="i" :key="index"></image>
							</view>
						</template>
					</view>
				</view>
				<!-- 电子签名 -->
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>电子签名</span>
					</view>
					<view class="addform-items">
						<view class="" style="position: relative;"
							@tap="$previewImage([info.electronic_sign_image],index)" v-if="info.electronic_sign_image">
							<image class="form-img" :src="info.electronic_sign_image">
							</image>
						</view>
					</view>
				</view>
			</view>
			<!-- 上次安检时间 -->
			<!-- <view class="ipts">
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>是否持续跟踪</span>
					</view>
					<view class="danger-img-box">
						<switch :checked="info.track==1?true:false" disabled style="transform:scale(0.7)" />
					</view>
				</view>
			</view> -->


			<template v-if="info.track != 0">

				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>处理情况</span>
					</view>
					<input type="text" :disabled="info.track==2" v-model="content" placeholder="请输入处理情况" />
				</view>
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>处理照片</span>
					</view>
					<view class="addform-items">
						<view class="" style="position: relative;" v-for="(i,index) in img_url">
							<image class="form-img" :src="i" :key="index" @tap="seeimg(img_url,index)"></image>
							<image class="delet" v-if="info.track == 1" src="/static/delet.png" mode=""
								@tap="deletImg(index)"></image>
						</view>
						<view class="add" @tap="choosefrom()" v-if="info.track == 1">
							<u-icon name="camera" color="#999999" size="28"></u-icon>
						</view>
					</view>
				</view>

				<view class="record">
					<image src="/static/jilu.png" mode=""></image>
					<span>跟踪记录</span>
				</view>
				<view style="margin-top: 10px;" v-for="(item,index) in info.thirdpartylog_list" :key="index">
					<view class="record-item">
						<view class="record-item-left">
							<span class="shu"></span>
							<span class="title">{{item.staffname}}</span>
							<span class="time">{{item.addtime_text}}</span>
						</view>
						<view class="record-item-right">
							<image class="dianhua" src="/static/dianhua.png" mode=""></image>
							<span class="title">{{item.staffmobile}}</span>
							<!-- <image class="zhankai" src="/static/zhankai.png" mode="" @click="showRecord"></image> -->
						</view>
					</view>
					<view>
						<view class="info-item autoheight">
							<view class="dot"></view>
							<span style="display: inline-block;width: 260rpx;">处理情况</span>
					<!-- 		<input disabled v-model="item.content" type="text" placeholder="07.24-07.30"
								placeholder-class="place-class"> -->
								
							<view>{{item.content}}</view>	
								
						</view>
						<view class="info-item">
							<view class="info-item-left">
								<view class="dot"></view>
								<span>处理照片</span>
							</view>
							<view class="danger-img-box">
								<view class="danger-img">
									<image :src="item.piclist[0]" mode="" @click="seeimg(item.piclist)"></image>
								</view>
							</view>
						</view>
					</view>
				</view>

			</template>
			<view class="btns" v-if="info.track == 1">
				<view class="btn1 consel" @tap="upTail()">上传跟踪</view>
				<view class="btn1 save" @tap="commit()">跟踪完成</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {},
				user: ['居民用户', '工商业用户'],
				type: ['户外', '户内'],
				technology: ['水电', '泥工', '木工'],
				tool: ['电焊机', '搅拌机', '挖掘机'],
				machines: ['书报', '杂志', '文章'],
				standby: ['截止阀', '球阀', '止回阀'],
				img: [],
				img_url: [],
				content: '', //处理情况
				id: '',
				userinfo: {}
			}
		},
		onShow() {

		},
		onLoad(e) {
			this.id = e.id
			this.init(e.id)
			
			wx.enableAlertBeforeUnload({
			    message: "是否返回上一页",
			   });
		},
		methods: {
			tapMap(info) {
				console.log(info, 'info');
				uni.openLocation({
					latitude: Number(info.lat),
					longitude: Number(info.long),
					name: info.address,
					success: (res) => {
						console.log(res, '成功');
					},
					fail: (err) => {
						console.log(err, '失败');
					}
				})
			},
			commit() {
				if (!this.content) return this.$showToast('请输入处理情况')
				if (this.img.length < 1) return this.$showToast('请上传处理照片')
				let _this = this
				uni.request({
					url: this.$url + 'staff.third_party/thirdparty_commit',
					method: 'POST',
					header: {
						token: uni.getStorageSync('token'),
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						thirdparty_id: _this.id,
						handel_picture: _this.img.toString(),
						handel_msg: _this.content
					},
					success: res => {
						_this.$showToast(res.data.msg)
						if (res.data.code == 1) {
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						}
					},
				});
			},
			upTail() {
				if (!this.content) return this.$showToast('请输入处理情况')
				if (this.img.length < 1) return this.$showToast('请上传处理照片')
				let _this = this
				uni.request({
					url: this.$url + 'staff.third_party/thirdparty_continue',
					method: 'POST',
					header: {
						token: uni.getStorageSync('token'),
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						thirdparty_id: _this.id,
						picture: _this.img.toString(),
						content: _this.content
					},
					success: res => {
						_this.$showToast(res.data.msg)
						if (res.data.code == 1) {
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						}
					},
				});
			},
			init(id) {
				let _this = this
				uni.request({
					url: this.$url + 'staff.third_party/details',
					method: 'POST',
					header: {
						token: uni.getStorageSync('token')
					},
					data: {
						id: id
					},
					success: res => {
						if (res.data.code == 1) {

							_this.info = res.data.data
							console.log('_this.info', _this.info);
							if (_this.info.track == 2) {
								_this.content = res.data.data.handel_msg,
									_this.img_url = res.data.data.handel_picture
							}
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			choosefrom() {
				if (this.img.length < 4) {
					var _this = this
					uni.chooseImage({
						count: 1,
						success: (res) => {
							uni.uploadFile({
								url: _this.$api + 'common/upload',
								filePath: res.tempFilePaths[0],
								name: 'file',
								header: {
									token: uni.getStorageSync('token')
								},
								success: (uploadFileRes) => {
									if (JSON.parse(uploadFileRes.data).code == 1) {
										_this.img_url.push(JSON.parse(uploadFileRes.data).data
											.intact_url)
										_this.img.push(JSON.parse(uploadFileRes.data).data
											.url)
									}
								},
								fail: (err) => {
									console.log(err);
								}
							})
						}
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '上传已达到限制'
					})
				}
			},
			deletImg(index) {
				this.img.splice(index, 1)
				this.img_url.splice(index, 1)
			},
			// 图片预览
			seeimg(img, index) {
				console.log('seeimg',img);
				uni.previewImage({
					urls: img,
					current: index
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.addform-items {
		display: flex;
		align-items: center;

		.form-img {
			width: 60rpx !important;
			height: 60rpx !important;
			margin-right: 20rpx;
		}

		.delet {
			position: absolute;
			top: -8rpx;
			right: 4rpx;
			width: 28rpx;
			height: 28rpx;
			z-index: 10;
		}

		.add {
			width: 60rpx;
			height: 60rpx;
			border: 1rpx solid #DDDDDD;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.content {
		background: #F1F1F1;
		padding-bottom: 100rpx;

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 30rpx;
			background-color: #fff;

			.header-right {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #333;
				margin-right: 20rpx;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}
		}

		.header1 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			height: 80rpx;
			width: 100%;
			background-color: #003690;
			padding: 0 40rpx;

			.ipt-box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				padding: 0 20rpx;
				width: 480rpx;
				height: 52rpx;
				background-color: #fff;
				border-radius: 24rpx;

				image {
					width: 32rpx;
					height: 32rpx;
				}
			}

			.header1-right {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #E2ECFB;

				image {
					width: 36rpx;
					height: 36rpx;
				}
			}
		}

		.dataCont {
			padding-top: 12rpx;
			padding-left: 42rpx;
			padding-right: 30rpx;

			.searTitle {
				font-size: 32rpx;
				font-weight: 600;
				text-align: left;
				color: #333333;
			}

			.searResult {
				display: flex;
				justify-content: space-between;

				.resText {
					font-size: 32rpx;
					font-weight: 400;
					text-align: left;
					color: #777777;
				}

				image {
					width: 36rpx;
					height: 36rpx;
				}
			}
		}

		.ipts {
			background-color: #fff;
			margin-bottom: 20rpx;
		}

		.info-item {
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			// height: 72rpx;
			width: 100%;
			height: 100rpx;
			padding: 0rpx 32rpx;
			align-items: center;
			background-color: #fff;
			font-size: 24rpx;
			color: #333;
			border-bottom: 1rpx solid #DDDDDD;

			image {
				width: 32rpx;
				height: 32rpx;
			}

			input {
				flex: 1;
				text-align: right;
			}

			.dot {
				width: 8rpx;
				height: 8rpx;
				background-color: #003690;
				border-radius: 50%;
				margin-right: 10rpx;
			}

			.danger-img {
				position: relative;

				.updeletes {
					position: absolute;
					top: -20rpx;
					right: -20rpx;
					width: 40rpx;
					height: 40rpx;
					z-index: 88;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.danger-img-box {
				display: flex;

				.danger-img {
					width: 75rpx;
					height: 75rpx;
					// border: 2rpx dashed #eee;
					margin-right: 10rpx;


					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.danger-img-box2 {
				display: flex;

				.danger-img {
					width: 75rpx;
					height: 75rpx;
					// border: 2rpx dashed #eee;
					margin-right: 10rpx;

					image {
						width: 100%;
						height: 100%;
						opacity: 1;
					}
				}
			}

			.info-item-left {
				display: flex;
				align-items: center;
				font-size: 28rpx;
			}
		}

		.hengxian {
			width: 700rpx;
			height: 2rpx;
			background-color: #eee;
			margin: 20rpx auto;
		}

		.place-class {
			font-size: 28rpx;
			color: #999;
		}

		.item-ipt {
			width: 400rpx;
			text-align: end;
		}

		.btn {
			width: 646rpx;
			height: 80rpx;
			margin: 74rpx auto;
			text-align: center;
			line-height: 80rpx;
			border-radius: 40rpx;
			background-image: linear-gradient(to bottom, #2366D5, #001B48);
			font-size: 32rpx;
			color: #E5EFFE;
		}

		.btns {
			position: fixed;
			bottom: 0;
			display: flex;
			width: 100%;
			z-index: 333;

			.btn1 {
				width: 50%;
				height: 96rpx;
				line-height: 96rpx;
				text-align: center;
				font-size: 24rpx;
			}

			.consel {
				background-color: #e9e9e9;
				color: #777;
			}

			.save {
				background-color: #003690;
				color: #fff;
			}
		}

		.btn:active {
			background: rgba(0, 0, 0, 0.4);
		}

		.zhanwei {
			height: 250rpx;
		}

		.record-item {
			display: flex;
			justify-content: space-between;
			padding: 10rpx 30rpx;
			border-bottom: 2rpx solid #eee;
			height: 100rpx;
			background: #ffffff;

			.record-item-left {
				display: flex;
				align-items: center;

				.shu {
					width: 8rpx;
					height: 28rpx;
					background-color: #003690;
					border-radius: 8rpx;
				}

				.title {
					font-size: 32rpx;
					color: #333;
					font-weight: 500;
					margin: 0 10rpx;
				}

				.time {
					font-size: 24rpx;
					color: #777;
				}
			}

			.record-item-right {
				display: flex;
				align-items: center;

				.dianhua {
					width: 28rpx;
					height: 28rpx;
				}

				.zhankai {
					width: 36rpx;
					height: 36rpx;
				}

				.title {
					font-size: 32rpx;
					color: #555;
					font-weight: 500;
					margin: 0 10rpx;
				}
			}
		}

		.supplement {
			background-color: #fff;
			position: relative;
			overflow: hidden;

			.explain {
				.textArea {
					min-height: 100rpx;
					width: 690rpx;
					border-bottom: 1rpx solid #DDDDDD;
					padding: 14rpx 30rpx;
					font-size: 32rpx;
					text-align: left;
					color: rgba(187, 187, 187, 0.84);
				}
			}

			.suppBottom {
				.danger-img {
					position: relative;
					margin-left: 50rpx;
					margin-bottom: 0rpx;
					width: 68rpx;
					height: 68rpx;
					float: left;

					image {
						width: 36rpx;
						height: 36rpx;
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
					}
				}

				.num {
					float: right;
					margin-right: 26rpx;
				}
			}
		}
	}


	.record {
		display: flex;
		align-items: center;
		color: #003690;
		font-size: 28rpx;
		margin-top: 20rpx;

		image {
			width: 32rpx;
			height: 32rpx;
			margin: 0 20rpx 0 30rpx;
		}

		span {
			font-weight: 700;
		}
	}

	.record-item {
		display: flex;
		justify-content: space-between;
		padding: 10rpx 30rpx;
		border-bottom: 2rpx solid #eee;

		.record-item-left {
			display: flex;
			align-items: center;

			.shu {
				width: 8rpx;
				height: 28rpx;
				background-color: #003690;
				border-radius: 8rpx;
			}

			.title {
				font-size: 32rpx;
				color: #333;
				font-weight: 500;
				margin: 0 10rpx;
			}

			.time {
				font-size: 28rpx;
				color: #777;
			}
		}

		.record-item-right {
			display: flex;
			align-items: center;

			.dianhua {
				width: 28rpx;
				height: 28rpx;
			}

			.zhankai {
				width: 36rpx;
				height: 36rpx;
			}

			.title {
				font-size: 32rpx;
				color: #555;
				font-weight: 500;
				margin: 0 10rpx;
			}
		}
	}
</style>
